import React, { memo, Suspense } from 'react'
import { renderRoutes } from 'react-router-config'
import { Provider } from 'react-redux'

import { HashRouter } from 'react-router-dom'
import routes from 'router'
import store from 'store'

import LJAppHeader from 'components/app-header';
import LJAppFooter from 'components/app-footer'
import LJAppPlayerBar from 'pages/player/app-player-bar'

export default memo(function App() {
    return (
        <Provider store={store}>
            <HashRouter>
                <LJAppHeader />
                <Suspense fallback={<div>loading</div>}>
                    {renderRoutes(routes)}
                </Suspense>
                <LJAppFooter />
                <LJAppPlayerBar />
            </HashRouter>
        </Provider>
    )
})
